<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <!--用户搜索-->
        <el-col :span="5">
          <el-input placeholder="请输入关键词">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <!-- 状态搜索-->
        <el-col :span="8">
          <el-row>
            <el-col :span="12">
              <el-select v-model="value" placeholder="请选择" style="float:right;">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-button icon="el-icon-search" style="background-color: #f5f7fa; float:left;"></el-button>
            </el-col>
          </el-row>
        </el-col>
        <!--添加用户-->
        <el-col :span="11" style="text-align: right;">
          <el-button type="primary" size="mini">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableList" border>
        <el-table-column label="No" type="index"></el-table-column>
        <el-table-column label="费用单编号" prop="param1" min-width="200"></el-table-column>
        <el-table-column label="费用单名称" prop="param2" min-width="200"></el-table-column>
        <el-table-column label="单据日期" prop="param3" min-width="200"></el-table-column>
        <el-table-column label="本单金额" prop="param4" min-width="200"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1"
        :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="10">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ExpenseOrder',
  data () {
    return {
      value: '',
      statusOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'true',
          label: '开启'
        },
        {
          value: 'false',
          label: '冻结'
        }
      ],
      tableList: [{
        param1: '费用单1',
        param2: '费用单名称',
        param3: '2020-05-10',
        param4: '3000'
      },
      {
        param1: '费用单2',
        param2: '费用单名称2',
        param3: '2020-05-10',
        param4: '4000'
      },
      {
        param1: '费用单3',
        param2: '费用单名称3',
        param3: '2020-05-10',
        param4: '5000'
      },
      {
        param1: '费用单4',
        param2: '费用单名称4',
        param3: '2020-05-10',
        param4: '4500'
      },
      {
        param1: '费用单5',
        param2: '费用单名称5',
        param3: '2020-05-10',
        param4: '3500'
      },
      {
        param1: '费用单6',
        param2: '费用单名称6',
        param3: '2020-05-10',
        param4: '3700'
      },
      {
        param1: '费用单7',
        param2: '费用单名称7',
        param3: '2020-05-10',
        param4: '4500'
      },
      {
        param1: '费用单8',
        param2: '费用单名称8',
        param3: '2020-05-10',
        param4: '4700'
      },
      {
        param1: '费用单1',
        param2: '费用单名称9',
        param3: '2020-05-10',
        param4: '4600'
      },
      {
        param1: '费用单9',
        param2: '费用单名称10',
        param3: '2020-05-10',
        param4: '3200'
      },
      {
        param1: '费用单10',
        param2: '费用单名称',
        param3: '2020-05-10',
        param4: '3900'
      }]
    }
  }
}
</script>

<style lang="less" scoped>
</style>
